<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="changeForm"
      label-width="120px"
      :inline="true"
      :rules="rules"
      class="demo-form-inline"
    >
      <el-form-item label="变更类型:" required prop="type">
        <SelectOption :options="options" @changeValue="changeType"></SelectOption>
      </el-form-item>
      <el-form-item label="变更前:">
        <el-input
          v-model="changeForm.beforeContent"
          disabled
          placeholder="根据变更类型，自动填充"
        />
      </el-form-item>
      <el-form-item label="变更后:" required prop="afterContentName">
        <el-input disabled v-if="changeForm.type == ''" placeholder="请选择变更类型" />
        <user-list-modal
          v-if="changeForm.type == 1"
          v-model="changeForm.personInfo"
          :default-users="[]"
          :multiple="false"
          :devType="'platform'"
        />
        <el-input
          v-if="changeForm.type == 2"
          v-model="changeForm.afterContentName"
          placeholder="请输入"
          maxlength="1000"
          show-word-limit
          @change="changeContent"
        />
        <popup-tree-input
          :props="data.deptTreeProps"
          v-if="changeForm.type == 3"
          :isInner="true"
          :data="orgList"
          :prop="changeForm.afterContentName"
          :current-change-handle="handleDepartment"
        />
      </el-form-item>
      <el-form-item label="变更事由:" required prop="description">
        <el-input maxlength="1000" show-word-limit v-model="changeForm.description" :rows="3" type="textarea" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="申请变更人:">
        <el-input v-model="changeForm.applicantName" disabled placeholder="当前登录人" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import UserListModal from '@/views/project/components/UserListModal/index.vue'
import PopupTreeInput from '@/views/project/components/PopupTreeInput/index.vue'
import SelectOption from '../../components/selectOption/index.vue'
import { ElMessage } from 'element-plus'
import { defineComponent, reactive, ref, watch } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  components: {
    UserListModal,
    SelectOption,
    PopupTreeInput,
  },
  props: {
    currentData: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const data = reactive({
      deptTreeProps:{
        label: 'name',
        children: 'children',
      },
    })
    const store = useStore()
    const ruleFormRef = ref()
    const rules = reactive({
      type: { required: true, message: '请选择变更类型' },
      afterContentName: { required: true, message: '请填写变更后内容' },
      description: { required: true, message: '请填写变更事由' },
    })
    let orgList = JSON.parse(JSON.stringify(store.state.projectCenter.orgList))
    let changeForm = store.state.projectCenter.changeForm
    changeForm.applicantName = JSON.parse(localStorage.getItem('userInfo') as any).cname
    changeForm.applicantId = JSON.parse(localStorage.getItem('userInfo') as any).userId
    const options = [
      {
        value: '1',
        label: '负责人变更',
      },
      {
        value: '2',
        label: '项目内容变更',
      },
      {
        value: '3',
        label: '承接单位变更',
      },
    ]
    const changeType = (obj) => {
      console.log(obj)
      changeForm.type = obj.value
      changeForm.typeName = obj.label
    }
    watch(
      () => changeForm.personInfo,
      async (newVal) => {
        console.log(newVal, 'form.personInfo')
        changeForm.afterContent = newVal.userId
        changeForm.afterContentName = newVal.cname
      }
    )
    const changeContent = (val) => {
      console.log(val, 'changeContent')
      changeForm.afterContent = val
    }
    //关联部门修改
    const handleDepartment = (item) => {
      console.log(item, 'handleDepartment')
      changeForm.afterContent = item.id
      changeForm.afterContentName = item.name
    }
    const submitForm = async () => {
      return new Promise((resolve, reject) => {
        ruleFormRef.value.validate((valid) => {
          console.log(valid, 'valid')
          if (valid) {
            resolve('校验成功')
          } else {
            ElMessage({
              message: '请将基本信息补充完整',
              type: 'warning',
            })
            reject('校验失败')
          }
        })
      })
    }
    watch(
      () => changeForm.type,
      (newVal) => {
        console.log(props.currentData)
        console.log(store.state.projectCenter.changeForm, 'store.state.projectCenter.changeForm')
        if (newVal == 1) {
          changeForm.beforeContent = props.currentData.projectLeaderName
        } else if (newVal == 2) {
          changeForm.beforeContent = props.currentData.mainResearchContent
        } else {
          changeForm.beforeContent = props.currentData.internalUnitName
        }
      }
    )
    return {
      store,
      data,
      orgList,
      options,
      rules,
      ruleFormRef,
      changeForm,
      submitForm,
      changeContent,
      changeType,
      handleDepartment,
    }
  },
  beforeUnmount() {
    console.log('beforeUasdasdnmount')
    for (let key in this.changeForm) {
      this.changeForm[key] = ''
    }
  },
})
</script>

<style scoped>
.el-form{
  margin-top: 20px;
}
.el-form-item{
  width: 95%;
}
</style>
